<template>
  <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    :key="itemkey"
    style="width: 100%"
  >
    <el-table-column label="头像" width="180">
      <template slot-scope="scope">
        <img id="avatar" :src="scope.row.avatar" alt />
      </template>
    </el-table-column>
    <el-table-column label="昵称" width="180">
      <template slot-scope="scope">
        <el-tag size="medium">{{scope.row.nickname}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="姓名" prop="sname"></el-table-column>
    <el-table-column label="学号" prop="sno"></el-table-column>
    <el-table-column align="right">
      <template slot-scope="scope">
        <div v-if="userType == '2'">
          <el-popconfirm
            confirm-button-text="是的"
            cancel-button-text="点错了"
            icon="el-icon-delete"
            confirm-button-type="danger"
            cancel-button-type="disabled"
            icon-color="red"
            title="您确定将该同学请出本班级吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button
              slot="reference"
              style="margin-right:150px"
              size="mini"
              type="danger"
            >请出</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getStudentList } from "@/api/clazz";
import { deleteStudent } from "@/api/student_clazz";
export default {
  data() {
    return {
      tableData: [],
      search: "",
      itemkey: "",
      userType: this.$store.state.user.type
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const { data: res } = await getStudentList(this.$route.query.clazzId);
      this.tableData = res.data.studentList;
    },
    async handleDelete(index, row) {
      const { data: res } = await deleteStudent(row.sno,this.$route.query.clazzId);
      if (res.code == 20000) {
        await this.getList();
        this.$notify.success({ title: res.message, message: "删除学生成功" });
      } else {
        this.$message.error(res.message + "删除学生失败");
      }
    }
  }
};
</script>
<style scoped>
#avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>